<template>
  <div id="mychart1" :style="myChartStyle1"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      myChart: {},
      pieData: [
        {
          value: 463,
          name: "贝贝收费站"
        },
        {
          value: 395,
          name: "三木收费站"
        },
        {
          value: 157,
          name: "育铭收费站"
        },
        {
          value: 149,
          name: "小龙收费站"
        },
        {
          value: 147,
          name: "其它"
        }
      ],
      pieName: [

          ],
      myChartStyle1: { float: "right", width: "100%", height: "300px" } //图表样式
    };
  },
  mounted() {
    this.initDate(); //数据初始化

  },
  methods: {
    initDate() {
      //获取数据
      axios({
        method: 'get',
        url: '/api/road_apply_logs/getPopular',
      })
      .then((res)=>{

        for (let i = 0; i < this.pieData.length-1; i++) {
          this.pieData[i].name=res.data.data[i].suggestRoad;
          this.pieData[i].value=res.data.data[i].applyNum;

        }
        for (let i = 0; i < this.pieData.length; i++) {
          this.pieName[i]=this.pieData[i].name

        }
        let temp=0
        for(let i=4;i<res.data.data.length;i++){
          temp+=res.data.data[1].applyNum
        }
        this.pieData[4].value=temp;
        this.initEcharts();
      });

    },
    initEcharts() {
      // 饼图
      const option = {
        data: this.pieName,

        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          textStyle:{
            color: "white"
          },
          left:"left"
        },
        series: [
          {

            type: 'pie',
            radius: '50%',
            data: this.pieData,

            label: {
                      show: true,
                      formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
                      color:"#fff",
                    },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };


      this.myChart = echarts.init(document.getElementById("mychart1"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      // window.addEventListener("resize", () => {
      //   this.myChart.resize();
      // });
    }
  }
};
</script>